* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  box-sizing: border-box;
}

li {
  list-style: none;
}

img,
a {
  border: none;
  outline: 0;
}

a {
  color: #333;
  text-decoration: none;
}

i {
  font-style: normal;
}

body {
  background-color: #edeef0;
}

body,
input,
button,
select,
textarea {
  color: #333;
  outline: 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
}

input ,textarea{
  -webkit-appearance: none;
  border: none;
  font-size:30px;
}

.tip-alert {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 28px 20px;
  border-radius: 8px;
  overflow: hidden;
  p {
    flex: 1;
    font-size: 24px;
    line-height: 36px;
    a {
      text-decoration: underline;
      color: rgb(32, 134, 249);
    }
  }
  &.error {
    background-color: rgb(255, 242, 238);
    .tip-icon {
      background-image: url('~assets/img/tip-error.png')
    }
    p {
      color: rgb(240, 83, 33);
    }
  }
  .tip-icon {
    margin-right: 20px;
    display: block;
    width: 26px;
    height: 26px;
    background-size: 100%;
  }
}

.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  height: 100%;
  z-index: 10000;
  .loading-box {
    position: relative;
    flex: 1;
    overflow: hidden;
    .run-ball {
      margin: 0 auto;
      background-color: #50aae7;
      width: 60px;
      height: 60px;
      position: absolute;
      top: 50%;
      border-radius: 100%;
      position: relative;
      -webkit-animation: sk-innerCircle 1s linear infinite;
      -moz-animation: sk-innerCircle 1s linear infinite;
      -o-animation: sk-innerCircle 1s linear infinite;
      animation: sk-innerCircle 1s linear infinite;
    }
    .run-ball .sk-inner-circle {
      display: block;
      background-color: #fff;
      width: 25%;
      height: 25%;
      position: absolute;
      border-radius: 100%;
      top: 5px;
      left: 5px
    }
  }
}

@-webkit-keyframes sk-innerCircle {
  0% {
    -webkit-transform: rotate(0deg)
  }
  100% {
    -webkit-transform: rotate(360deg)
  }
}

@-moz-keyframes sk-innerCircle {
  0% {
    -moz-transform: rotate(0deg)
  }
  100% {
    -moz-transform: rotate(360deg)
  }
}

@-o-keyframes sk-innerCircle {
  0% {
    -o-transform: rotate(0deg)
  }
  100% {
    -o-transform: rotate(360deg)
  }
}

@keyframes sk-innerCircle {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

.list-item {
  padding: 0 28px;
  background-color: #fff;
  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 98px;
    font-size: 32px;
    &+.item {
      border-top: 1px solid #ededf0;
    }
    .left,
    .right {
      .text-ellipsis();
    }
    .left {
      max-width: 80%;
      color: #666;
      flex-shrink: 0;
      margin-right: 10px;
    }
    .right {
      color: #292929;
      flex: 1;
      text-align: right;
    }
  }
}

.ui-switch {
  position: relative;
  border-radius: 50px;
  width:102px;
  height:62px;
  transition: background ease-out .2s;
  background-color:rgb(190,193,200);
  &.on {
    background-color:@color-primary;
    &::before {
      left:43px;
    }
  }
  &::before {
    content:'';
    transition: all ease-out .2s;
    position: absolute;
    z-index:1;
    top:3px;
    left:3px;
    width:56px;
    height:56px;
    background-color:#fff;
    border-radius: 50%;
  }
}


.phone-item-box {
  &,.phone-item-code {
    .fx;
    .fx-vc;
  }
  .phone-item-code {
    .fx-between;
    white-space: nowrap;
    line-height: 44px;
    width:130px;
    margin-right: 40px;
    font-size:30px;
    color:#292929;
  }

  .phone-item-input {
    .flex;
  }
}


.modal-lock-fixed {
  position: fixed;
  z-index: 10001;
  top:0;
  left:0;
  bottom:0;
  right: 0;
}
